<template>
  <music-list :songs="songs" :name="name" :bg-img="bg"></music-list>
</template>

<script>
    import {getSong} from "@/common/js/song";
    import MusicList from "@/components/music-list/MusicList";

    export default {
        name: "Detail",
        components: {MusicList},
        mounted(){
            this._getSong()
        },
        data(){
            return {
                songs: [],
            }
        },
        computed: {
            bg(){
                return this.$route.params.avatar
            },
            name(){
                return this.$route.params.name
            }
        },
        methods: {
            async _getSong(){
              this.songs = await getSong(this.$route.params.id)
            },
        }
    }
</script>

<style scoped></style>
